<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../../css/mui.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link href="../../../css/mui.picker.css" rel="stylesheet" />
    <link href="../../../css/mui.poppicker.css" rel="stylesheet" />
    <style>
      body, .mui-content {
				background-color: #fff;
				color: #333;
			}
			header.mui-bar{
				display: none;
			}
			.mui-bar-nav~.mui-content{
				padding: 0;
			}
			 .title{
			  	margin: 35px 15px 10px;
			  }
			  .title+.content{
			  	/* margin: 10px 15px 35px;
			  	color: #bbb;
			  	text-indent: 1em; */
			  	font-size: 14px;
			  	line-height: 24px;
			  }
			  .mui-table-view{
			  	margin-bottom: 35px;
			  }
        .item input{
          height: auto;
          padding: 6px 10px;
          font-size: 14px;
          margin-bottom: 0px;
        }
        .screen{
          padding: 10px;
        }
        .screen span{
          display: inline-block;
          padding:6px 8px;
          border:1px solid #eee;
          border-radius: 4px;
          font-size: 0.8rem;
        }
        .screen span.active{
          background-color: #0082E6;
          color: #fff;
          border:1px solid #0082E6;
        }
		</style>
  </head>
  <body>
    <div class="mui-content" id="content">
      <div class="title">按区域</div>
      <div class="content" style="padding: 10px;">
        <div class="item flex align-center">
          <div class="text-grey" style="width: 100px;">所属区域:</div>
          <div class="text-black"><input type="text" placeholder="请输入" v-model="form.chooseArea.name" readonly="readonly"
              @click="area()" /></div>
        </div>
        <div class="item flex align-center">
          <div class="text-grey" style="width: 100px;">所属场站:</div>
          <div class="text-black"><input type="text" placeholder="请输入" v-model="form.chooseStation.name" readonly="readonly"
              @click="station()" /></div>
        </div>
        <div class="item flex align-center">
          <div class="text-grey" style="width: 100px;">所属项目:</div>
          <div class="text-black"><input type="text" placeholder="请输入" v-model="form.chooseItem.name" readonly="readonly"
              @click="project()" /></div>
        </div>
      </div>
      <div class="title" style="margin-bottom: 15px;">按从属</div>
      <div class="screen flex justify-start"> <span :class="form.mdmMainFlag===item.value?'active':''" v-for="(item,index) in list" @click="chooseMdmMainFlag(item)" class="margin-right">{{item.label}}</span></div>
      <div class="title" style="margin-bottom: 0px;">按类型</div>
      <div class="content">
        <!-- <select class="mui-btn mui-btn-block">
          <option value="item-1">item-1</option>
          <option value="item-2">item-2</option>
          <option value="item-3">item-3</option>
          <option value="item-4">item-4</option>
          <option value="item-5">item-5</option>
        </select> -->
        <input type="text" placeholder="请选择" readonly="readonly" id='showUserPicker' v-model="form.mdmProp.text" />
      </div>
      <div class="flex padding">
        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined flex-sub margin-right" @click="reset()">重置</button>
        <button type="button" class="mui-btn mui-btn-primary flex-sub" @click="submit()">确认</button>
      </div>
    </div>
    </div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/mui.dtpicker.js"></script>
    <script src="../js/sqlite.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script type="text/javascript" charset="utf-8">
      mui.init({
        keyEventBind: {
          backbutton: false,
          menubutton: false
        }
      });
      var screenVM = null; // 列表实例
      var picker=null;
      mui.plusReady(function() {
        picker = new mui.PopPicker();
        screenVM.type();
      })
      screenVM = new Vue({
        el: "#content",
        data: {
          mdmPropTypes: [],
          list: [{
            label: "全部",
            value: ''
          },{
            label: "仅主设备",
            value: true
          }, {
            label: "仅子设备",
            value: false
          }],
          form: {
            mdmProp: {
              text: '',
              value:''
              
            },
            mdmMainFlag: '',
            chooseItem: {
              id: '',
              name: ''
            },
            chooseArea: {
              id: '',
              name: ''
            },
            chooseStation: {
              id: '',
              name: ''
            }
          },

        },
        created: function() {
          //this.type()
        },
        methods: {
          type() { //类型
            var that = this
            mui.baseApp.httpRequst("/api/metadataDeviceType/list", {}, function(data) {
              var Arr = [];
              $.each(data, function(i, v) {
                var item = {
                  value: v.id,
                  text: v.deviceTypeName
                }
                Arr.push(item)
              });
              that.mdmPropTypes = Arr
              picker.setData(that.mdmPropTypes);

            }, function() {
              console.log("获取数据失败");
            })
          },
          chooseMdmMainFlag(item) { //选择从属
            var that = this;
            that.form.mdmMainFlag = item.value;
          },
          area() {
            mui.openWindow({
              url: '../file/area.html',
              id: '../file/area.html',
              styles:{
                zindex:9998
              },
              extras: {
                type: 1
              }
            })
          },
          station() {
            mui.openWindow({
              url: '../file/area.html',
              id: '../file/area.html',
              styles:{
                zindex:9998
              },
              extras: {
                type: 0
              }
            })
          },
          project() { //所属项目
            mui.openWindow({
              url: '../file/project.html',
              id: '../file/project.html',
              styles:{
                zindex:9998
              },
            })
          },
          submit(){
            var that=this;
            mui.fire(main, 'screenMain', {
              form: that.form
            });
            closeMenu();
          },
          reset() {
            var that = this
            that.form = {
              mdmProp: {
                text:'',
                value:''
              },
              mdmMainFlag: true,
              chooseItem: {
                id: '',
                name: ''
              },
              chooseArea: {
                id: '',
                name: ''
              },
              chooseStation: {
                id: '',
                name: ''
              }
            }
          }
        }
      })

      var showUserPickerButton = document.getElementById('showUserPicker');
      showUserPickerButton.addEventListener('tap', function(event) {
        picker.show(function(items) {
          console.log('选择的类型' + JSON.stringify(items[0]))
          screenVM.form.mdmProp = items[0];
          //返回 false 可以阻止选择框的关闭
          //return false;
        });
      }, false);
      //获得侧滑主窗口webview对象
      var main = null;
      mui.plusReady(function() {
        main = plus.webview.currentWebview().opener();
        console.log(screenVM.form)
      })

      function closeMenu() {
        mui.fire(main, "menu:swipeleft");
      }
     		//优化显示出来的侧滑菜单，只需监听该菜单的左滑事件，然后将其关闭即可；在菜单上右滑，不做任何操作；
        window.addEventListener("swiperight",closeMenu);  
        // document.getElementById("close-btn").addEventListener('tap',closeMenu);
        mui.menu = closeMenu;

      window.addEventListener("chooseItem", function(e) {
        screenVM.form.chooseItem = e.detail.item;
      });
      window.addEventListener("get_screen", function(e) {
        screenVM.form = e.detail.form;
      });
      window.addEventListener("chooseArea", function(e) {
        screenVM.form.chooseArea = e.detail.item;
      });
      window.addEventListener("chooseStation", function(e) {
        screenVM.form.chooseStation = e.detail.item;
      });
    </script>
  </body>

</html>
